<style lang="scss" scoped>
.edit {
  padding: 10px;
  .edit-item {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
    p {
      color: #007bff;
      line-height: 40px;
      margin-left: 10px;
    }
  }
}
</style>

<template>
  <div class="edit">
    <van-nav-bar title="我的档案" left-text="" left-arrow @click-left="router.go(-1)" />
    <div class="edit-item">
      <p>[主要症状]</p>
      <van-field v-model="diseaseMain" placeholder="请输入主要症状" />
    </div>
    <div class="edit-item">
      <p>[现病史]</p>
      <van-field v-model="diseaseNow" placeholder="请输入现病史" />
    </div>
    <div class="edit-item">
      <p>[既往病史]</p>
      <van-field v-model="diseaseBefore" placeholder="请输入既往病史" />
    </div>
    <div class="edit-item">
      <p>[治疗经历]</p>
      <van-field v-model="treatmentProcess" placeholder="请输入治疗经历" />
      <van-field
        v-model="startTime"
        is-link
        readonly
        name="datePicker"
        placeholder="选择起始时间"
        @click="startShow = true"
      />
      <van-popup v-model:show="startShow" position="bottom">
        <van-date-picker @confirm="startConfirm" @cancel="startShow = false" />
      </van-popup>
      <van-field
        v-model="endTime"
        is-link
        readonly
        name="datePicker"
        placeholder="选择结束时间"
        @click="endShow = true"
      />
      <van-popup v-model:show="endShow" position="bottom">
        <van-date-picker @confirm="endConfirm" @cancel="endShow = false" />
      </van-popup>
    </div>
    <div class="edit-item" style="border: 0">
      <p>[相关图片]</p>
      <el-upload style="margin-left: 10px" ion="#" list-type="picture-card" :auto-upload="false">
        <el-icon><Plus /></el-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <el-icon><zoom-in /></el-icon>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <el-icon><Download /></el-icon>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <el-icon><Delete /></el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <el-button type="primary" size="large" style="width: 100%; margin-top: 20px" @click="editfile"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import type { UploadFile } from 'element-plus'
import { updateUserArchives } from '../../api/search';

const router = useRouter()
// 主要症状
const symptom = ref('')
// 开始时间
const startTime = ref('')
// 结束时间
const endTime = ref('')
// 开始时间框
const startShow = ref(false)
// 结束时间框
const endShow = ref(false)
// 选择开始时间
const startConfirm = ({ selectedValues } :any) => {
  startTime.value = selectedValues.join('-')
  startShow.value = false
}
// 选择结束时间
const endConfirm = ({ selectedValues } :any) => {
  endTime.value = selectedValues.join('-')
  endShow.value = false
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const archivesId=ref()
const diseaseMain = ref('')
const diseaseBefore = ref('')
const diseaseNow = ref('')
const treatmentProcess = ref('')
const userId = ref(parseInt(localStorage.getItem('userId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
const editfile = async () => {
  let res = await updateUserArchives(userId.value, sessionId.value, {
    archivesId:parseInt(localStorage.getItem("archivesId") as string),
    diseaseMain: diseaseMain.value,
    diseaseNow: diseaseNow.value,
    diseaseBefore: diseaseBefore.value,
    treatmentHospitalRecent:"	最近治疗医院",
    treatmentProcess: treatmentProcess.value,
    treatmentStartTime: startTime.value,
    treatmentEndTime: endTime.value
  })
  console.log(res);
  router.push("/files")
}
</script>